<template>
  <div class="content">
    <div class="flex justifyBetween">
      <el-image
        style="width: 230px; height: 230px"
        :src="`${$http}${hotDetail.hotGraph}`"
      ></el-image>
      <div class="aaa" style="width: 70%">
        <h3>
          {{ hotDetail.hotName }}
        </h3>
        <div style="margin-top: 12px">
          {{ hotDetail.hotComment }}
        </div>
        <div class="opition flex justifyEnd">
          <div class="dianzanBox flex" @click="dianzan">
            <div
              :class="[usercolandlike.likeStatus ? 'activeCollect' : '']"
              style="margin-right: 6px"
            >
              点赞({{ hotDetail.likeNum }})
            </div>
            <img
              src="/image/dianzan.png"
              style="width: 20px; height: 20px"
              v-if="!usercolandlike.likeStatus"
            />
            <img
              src="/image/dianzan2.png"
              style="width: 20px; height: 20px"
              v-else
            />
          </div>
          <div class="collectBox flex" @click="collect">
            <div
              :class="[usercolandlike.collectionStatus ? 'activeCollect' : '']"
              style="margin-right: 6px"
            >
              收藏({{ hotDetail.collectionNum }})
            </div>
            <img
              src="/image/collect1.png"
              style="width: 20px; height: 20px"
              v-if="!usercolandlike.collectionStatus"
            />
            <img
              src="/image/collect2.png"
              style="width: 20px; height: 20px"
              v-else
            />
          </div>
          <div style="margin-left: 16px">评论数{{ hotDetail.commentNum }}</div>
        </div>
      </div>
    </div>
    <div class="pinglunList">
      <div
        class="pinglunItem"
        v-for="item in pinglunList"
        :key="item.id"
      >
        <div class="flex alignCenter justifyBetween">
          <div class="flex alignCenter">
            <img
              :src="`${$http}${item.userAvatar}`"
              style="width: 48px; height: 48px; border-radius: 50%"
            />
            <span style="margin-left: 10px">{{ item.userNick }}</span>
          </div>

          <div>{{ item.createTime }}</div>
        </div>
        <span style="margin: 50px 0 0 120px">{{ item.remarkComment }}</span>

        <div style="margin-top: 16px">
          <!-- {{ hotDetail.zoneMessage }} -->
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-popover
        placement="right"
        title="请输入"
        width="500"
        trigger="click"
        :value="showflag"
        @hide="hide(inpvalue)"
      >
        <el-input v-model="inpvalue" placeholder="请输入内容:"></el-input>
        <el-button slot="reference">点击评论</el-button>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showflag: false,
      inpvalue: "",
      hotDetail: {},
      usercolandlike: {},
      pinglunList: [],
    };
  },
  mounted() {
    this.getreqzoneIdList();
    this.getUsercolandlike();
    this.getPinglun();
  },
  methods: {
    // 热点详情
    async getreqzoneIdList() {
      let result = await this.$request.hotDetail(this.$route.query.id);
      this.hotDetail = result.data;
    },
    //  评论
    async getPinglun() {
      let data = {
        hotId: this.$route.query.id,
      };
      let result = await this.$request.selecthot(data);
      // console.log(result.data,"======");
      this.pinglunList = result.data;
    },
    async getUsercolandlike() {
      let data = {
        hotId: Number(this.$route.query.id),
        userId: Number(localStorage.getItem("USERID")),
      };
      let result = await this.$request.usercolandlike(data);
      this.usercolandlike = result.data || {};
    },
    // 收藏
    collect() {
      let data = {
        collectionStatus: this.usercolandlike.collectionStatus ? 0 : 1,
        hotId: Number(this.$route.query.id),
        userId: Number(localStorage.getItem("USERID")),
      };
      let result = this.$request.col(data);
      this.usercolandlike.collectionStatus == 1 ? true : false;
      this.getUsercolandlike();
    },
    // 点赞
    dianzan() {
      let data = {
        likeStatus: this.usercolandlike.likeStatus ? 0 : 1,
        hotId: Number(this.$route.query.id),
        userId: Number(localStorage.getItem("USERID")),
      };
      let result = this.$request.like(data);
      this.usercolandlike.likeStatus == 1 ? true : false;
      this.getUsercolandlike();
    },
    hide(data) {
      // 发布评论
      if (this.inpvalue != "") {
      let params = {
        userId: Number(localStorage.getItem("USERID")),
        hotId: Number(this.$route.query.id),
        remarkComment: data,
        remarkVerifyStatus: 0,
      };
      this.$request.remarkadd(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.inpvalue = "";
          this.getPinglun();
        } else {
          this.$message.error(res.msg);
        }
      });
      }else{
          this.$message.error('请输入');
      }
    },
  },
};
</script>

<style lang="less">
.aaa{
  background: #181818;
  opacity: 0.8;
  border-radius:10px;
}
.content {
  width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 0;
  color: rgb(251, 247, 247);
}
.opition {
  margin-top: 16px;
  cursor: pointer; /* 变成手 */
}
.activeCollect {
  color: #ff8b1a;
}
.dianzanBox {
  margin-right: 12px;
}
.pinglunList {
  margin-top: 12px;
  width: 100%;
}
.pinglunItem {
  padding: 12px;
  color: #f7f7f7;
  border-bottom: 1px solid rgb(188, 186, 186);
}
.bottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
  .center {
    display: flex;
  }
}
</style>
